<template>
  <view class="warehousing">
    <view class="top-content">
      <!-- 查询 -->
      <view class="search">
        <input
          type="text"
          class="uni-input"
          v-model="orderNumber"
          placeholder="请输入单号"
        />
        <picker
          class="uni-picker"
          @change="bindPickerChange"
          :value="statusIndex"
          range-key="name"
          :range="statusList"
        >
          <view class="picker-box">
            <view class="picker-text">{{
              statusList[statusIndex]?.name || "全部状态"
            }}</view>
            <uni-icons type="down" size="30" class="picker-icon"></uni-icons
          ></view>
        </picker>
        <view class="btn-box">
          <!-- 重置按钮 -->
          <button class="reset-btn" type="default" @click="resetFn">
            重置
          </button>
          <button class="search-btn" type="primary" @click="searchFn">
            查询
          </button>
        </view>
      </view>
    </view>
    <view class="content">
      <scroll-view
        scroll-y="true"
        style="height: 100%"
        @scrolltolower="loadMore"
      >
        <view
          v-for="(item, index) in inventoryTaskList"
          :key="index"
          class="list-item"
        >
          <view class="list-title-item flex">
            <view
              ><text>单号：</text> <text>{{ item.orderNumber }}</text></view
            >
            <view class="status" :class="MOVE_STATUS[item.status]">
              {{ MOVE_TEXT[item.status] }}
            </view>
          </view>
          <view class="list-title-item">
            <text>期限：</text>
            <text>{{
              timestampToDate(item.scheduledFinishTime) || "---"
            }}</text>
          </view>
          <view class="operation list-title-item">
            <view
              class="popup-btn delete"
              v-if="
                item.status == 0 && hasPermission(['inventory:check:delete'])
              "
              @click="deleteFn(item.id)"
              >删除</view
            >
            <view
              class="popup-btn delete"
              v-if="
                item.status == 10 && hasPermission(['inventory:check:close'])
              "
              @click="rejectFn(item.id)"
              >关闭</view
            >

            <view class="popup-btn" @click="toDetails(item.id)">查看</view>
            <view
              class="popup-btn"
              v-if="
                item.status == 10 && hasPermission(['inventory:check:confirm'])
              "
              @click="toDetails(item.id, 'inventory')"
              >盘点确认</view
            >
            <view
              class="popup-btn"
              v-if="
                item.status == 0 && hasPermission(['inventory:check:check'])
              "
              @click="confirmInventoryFn(item.id)"
              >确认</view
            >
            <!-- <view
              class="popup-btn"
              v-if="
                item.status === 0 && hasPermission(['inventory:check:update'])
              "
              @click="confirmInventoryFn(item.id)"
              >编辑</view
            > -->
          </view>
        </view>
        <view v-if="loading" class="loading">加载中...</view>
        <view v-if="noMoreData" class="no-more-data">暂无多数据了</view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import {
  getInventoryTaskList,
  deleteInventoryTask,
  closeInventoryTask,
  checkInventoryTaskList,
} from "@/service/inventory";
import { timestampToDate, buildGetUrl, hasPermission } from "@/common/utils";
import {
  STORAGE_KEY,
  RESPONSE_CODE,
  MOVE_STATUS,
  MOVE_TEXT,
} from "@/common/constant";
export default {
  data() {
    return {
      hasPermission,
      timestampToDate,
      MOVE_STATUS,
      MOVE_TEXT,
      inventoryTaskList: [],
      loading: false,
      page: 1,
      total: 0,
      noMoreData: false,
      statusList: [
        {
          name: "全部状态",
          code: "",
        },
        {
          name: "草稿",
          code: 0,
        },
        {
          name: "已确认",
          code: 10,
        },
        {
          name: "已完成",
          code: 100,
        },
        {
          name: "关闭",
          code: 140,
        },
      ],
      statusIndex: "",
      orderNumber: "",
      status: "",
      operationTarget: null,
      isPickerChange: false,
    };
  },
  onLoad() {},

  mounted() {},
  onShow() {
    this.resetAllAndLoadData();
  },

  methods: {
    // 确认受理
    confirmInventoryFn(id) {
      // 二次确认框
      uni.showModal({
        title: "提示",
        content: "是否确认单据？",
        success: (res) => {
          if (res.confirm) {
            const query = buildGetUrl({ id });
            checkInventoryTaskList(query).then((res) => {
              if (res.code === RESPONSE_CODE.SUCCESS) {
                uni.showToast({
                  title: "确认成功",
                  icon: "success",
                });
                this.resetAllAndLoadData();
              }
            });
          }
        },
      });
    },
    // 拒绝
    rejectFn(id) {
      // 弹出二次确认框
      uni.showModal({
        title: "提示",
        content: "是否关闭所选中单据？",
        success: (res) => {
          if (res.confirm) {
            // 删除
            const query = buildGetUrl({ id });
            closeInventoryTask(query).then((res) => {
              if (res.code === RESPONSE_CODE.SUCCESS) {
                this.resetAllAndLoadData();
              }
            });
          }
        },
      });
    },
    // 删除
    deleteFn(id) {
      // 弹出二次确认框
      uni.showModal({
        title: "提示",
        content: "是否删除所选中数据？",
        success: (res) => {
          if (res.confirm) {
            // 删除
            const query = buildGetUrl({ id });
            deleteInventoryTask(query).then((res) => {
              if (res.code === RESPONSE_CODE.SUCCESS) {
                uni.showToast({
                  title: "删除成功",
                  icon: "success",
                });
                this.resetAllAndLoadData();
              }
            });
          }
        },
      });
    },
    toDetails(id, mark) {
      let url = `/pages/taskPage/inventory/details?id=${id}`;
      if (mark) {
        url += `&mark=${mark}`;
      }
      uni.navigateTo({
        url: url,
      });
    },
    // 获取状态选择
    bindPickerChange(e) {
      this.statusIndex = e.detail.value;
      this.status = this.statusList[this.statusIndex].code;
      this.isPickerChange = true;
      console.log(this.status);
    },
    loadData() {
      // 模拟异步请求数据
      const params = {
        pageNo: this.page,
        pageSize: 20,
        orderNumber: this.orderNumber,
        status: this.status,
      };
      // console.log("查询参数对象", params);
      const query = buildGetUrl(params);
      // console.log("拼接好的get参数", query);

      getInventoryTaskList(query).then((res) => {
        if (res.code === RESPONSE_CODE.SUCCESS) {
          this.total = res.data.total;
          this.inventoryTaskList.push(...res.data.list);
          console.log("获取入库列表成功", res);
          this.loading = false;
        } else {
        }
      });
    },
    // 滚动加载
    loadMore() {
      if (this.loading || this.noMoreData) return;
      this.loading = true;
      this.page++;
      // 这里可以调用接口获取更多数据
      if (this.inventoryTaskList.length >= this.total) {
        // 假设只有三页数据
        this.noMoreData = true;
        this.loading = false;
        return;
      }
      this.loadData();
    },
    // 查询
    searchFn() {
      if (
        this.orderNumber ||
        this.status ||
        this.status === 0 ||
        this.isPickerChange
      ) {
        this.page = 1;
        this.inventoryTaskList = [];
        this.noMoreData = false;
        this.loading = false;
        this.isPickerChange = false;
        this.loadData();
      }
    },

    // 重置
    resetFn() {
      if (
        this.orderNumber ||
        this.status ||
        this.status === 0 ||
        this.isPickerChange
      ) {
        this.resetAllAndLoadData();
      }
    },

    // 全部重置
    resetAllAndLoadData() {
      this.page = 1;
      this.inventoryTaskList = [];
      this.noMoreData = false;
      this.loading = false;
      this.statusIndex = "";
      this.status = "";
      this.orderNumber = "";
      this.isPickerChange = false;
      this.loadData();
    },
  },
};
</script>

<style lang="less">
.warehousing {
  background: #ecf5ff;
  .top-content {
    height: 80rpx;
    background: #fff;
    border-bottom: 1rpx solid #999;
    .search {
      height: 80rpx;
      display: flex;
      // 横向
      flex-direction: row;
      //   两端对齐
      justify-content: space-between;
      align-items: center;
      .uni-input {
        flex: 1;
        height: 60rpx;
        font-size: 28rpx;
        line-height: 80rpx;
        padding-left: 20rpx;
        box-sizing: border-box;
        background: #eeeeee;
        margin-left: 10rpx;
        border-radius: 8rpx;
      }
      .uni-picker {
        flex: 0.7;
        text-align: center;
        .picker-box {
          display: flex;
          flex-direction: row;
          align-items: center;
          .picker-text {
            text-align: right;
            font-size: 28rpx;
            flex: 2;
          }
          .picker-icon {
            text-align: left;
            font-size: 32rpx !important;
            flex: 1;
          }
        }
      }
      .btn-box {
        flex: 0.7;
        display: flex;
        margin-right: 10rpx;
        // 横向
        flex-direction: row;
        .search-btn,
        .reset-btn {
          flex: 1;
          height: 60rpx;
          line-height: 60rpx;
          width: 90rpx;
          font-size: 20rpx;
          padding: 0;
        }
        .search-btn {
          margin-left: 10rpx;
        }
      }
    }
  }
  .content {
    // 修改这里
    height: calc(100vh - 80rpx);
    .loading,
    .no-more-data {
      text-align: center;
      line-height: 80rpx;
      color: #999;
    }
    .list-item {
      font-size: 12px;
      margin: 10rpx;
      background: #fff;
      border-radius: 14rpx;
      padding: 10rpx 20rpx;
      .list-title-item {
        flex: 1;
        line-height: 40rpx;
        overflow: hidden;
        &.flex {
          display: flex;
          justify-content: space-between;
        }
      }
      .operation {
        display: flex;
        // 靠右对齐
        justify-content: flex-end;
        margin-top: 10rpx;
        .popup-btn {
          margin: 0 20rpx;
          color: #0099ff;
          &.delete {
            // 单独靠右
            margin: 0;
            margin-right: auto;
            color: #ff0000;
          }
        }
      }
    }
  }
}
</style>
